<template>
	<view>
		<view class="login">
			<view class="title">
				<view v-if="loginType === 'phone'" class="title-left">手机号登录</view>
				<view v-else class="title-left">账号登录</view>
				<view class="userInfo">
					<view v-if="loginType === 'phone'" class="loginType" @click="loginType = 'account'">
						<view>账号登录
						 <image class="icon3" src="/static/red3.png"></image>
						</view>
					</view>
					<view v-else class="loginType" @click="loginType = 'phone'">
						<view>手机号登录
						 <image class="icon3" src="/static/red3.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="userInfo">
				<form class="form">
				      <div class="" v-if="loginType === 'account'">
				        <input class="input" type="text" name="account" placeholder="请输入账号" v-model="account">
				        <input class="input" type="password" name="password" placeholder="请输入密码" v-model="password">
				      </div>
				      <div v-else>
				        <input class="input" type="tel" name="phone" placeholder="请输入手机号" v-model="phone">
				        <div class="verify">
				          <input class="input" type="text" name="code" placeholder="请输入验证码" v-model="code">
				          <button class="btn-verify" @click="sendCodeFn" :disabled="countdown > 0">{{ countdown > 0 ? countdown + 's' : '获取验证码' }}</button>
				        </div>
				      </div>
				      <button class="btn-submit" @click="submit">登录</button>
				    </form>
			</view>
		</view>
	</view>
</template>

<script>
	import { login } from '@/api/login.js'
	import { setToken } from '@/utils/token.js'
	import toast from '@/utils/toast.js'
	export default {
		data() {
			return {
		      loginType: 'account', // 登录方式，可选值：'account'、'phone'
		      account: 'xbsj001',
		      password: '123456',
		      phone: '',
		      code: '',
		      countdown: 0, // 验证码倒计时
			  token: null
		    }
		},
		
		
		
		  methods: {
		    // 切换登录方式
		    switchLoginType(type) {
		      this.loginType = type
			  this.clearForm()
		    },
			// 点击登录
			async login() {
				const { account, password } = this
				const res = await login({account, password})
				toast(res.msg)
				if(res.msg !== 'ok') return
				setToken(res.data)
			},
		    // 提交登录表单
		    submit() {
		      if (this.loginType === 'account') {
		        if (!this.account) {
		          uni.showToast({
		            title: '请输入账号',
		            icon: 'none',
		          })
		          return
		        }
		        if (!this.password) {
		          uni.showToast({
		            title: '请输入密码',
		            icon: 'none',
		          })
		          return
		        }
		        // TODO: 账号密码登录逻辑
				this.login()
		      } else {
		        if (!this.phone) {
		          uni.showToast({
		            title: '请输入手机号',
		            icon: 'none',
		          })
		          return
		        }
		        if (!this.code) {
		          uni.showToast({
		            title: '请输入验证码',
		            icon: 'none',
		          })
		          return
		        }
		        // TODO: 手机号验证码登录逻辑
		      }
		      // TODO: 登录成功后的处理
		    },
		    // 发送验证码
		    sendCodeFn() {
		      if (!this.phone) {
		        uni.showToast({
		          title: '请输入手机号',
		          icon: 'none',
		        })
		        return
		      }
		      // TODO: 发送验证码逻辑
		      // 发送成功后启动倒计时
		      this.countdown = 60
		      const timer = setInterval(() => {
		        if (this.countdown <= 0) {
		          clearInterval(timer)
		        } else {
		          this.countdown--
		        }
		      }, 1000)
		    },
		    // 清空表单
		    clearForm() {
		      this.account = ''
		      this.password = ''
		      this.phone = ''
		      this.code = ''
		      this.countdown = 0
		    },
		  },
		}
</script>

<style lang="scss">
.login {
	padding-top: 100rpx;
	padding-left: 64rpx;
	padding-right: 64rpx;
 .title {
	 margin-bottom: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title-left {
		width: 300rpx;
		height: 66rpx;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 48rpx;
		color: black;
		letter-spacing: 0;
	}
	.loginType {
		width: 160rpx;
		height: 44rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 32rpx;
		color: #EF4F3F;
		letter-spacing: 0;
		text-align: right;
		.icon3 {
			position: absolute;
			transform: translate(5rpx, 10rpx);
			width: 20rpx;
			height: 20rpx;
		}
	}
   }
   .form {
	   position: relative;
	   margin-top: 50rpx;
	   .num {
		   position: absolute;
		   transform: translate(500rpx, -70rpx);
		   width: 140rpx;
		   height: 40rpx;
		   font-family: PingFangSC-Regular;
		   font-weight: 400;
		   font-size: 28rpx;
		   color: #2A2929;
		   letter-spacing: 0;
	   }
   }
	   .btn-submit {
		   margin-top: 90rpx;
		   width: 618rpx;
		   height: 100rpx;
		   color: #fff;
		   background: #ee4f3e;
		   border-radius: 49.54rpx;
	   }
 }
 .input {
   width: 600rpx;
   height: 80rpx;
   margin-bottom: 20rpx;
   padding: 0 20rpx;
   border-bottom: 1rpx solid #ccc;
   font-size: 32rpx;
   color: black;
 }
 .btn-verify {
	 position: absolute;
	 transform: translate(450rpx, -90rpx);
	 width: 200rpx;
	 height: 50rpx;
	 line-height: 50rpx;
	 font-family: PingFangSC-Regular;
	 font-weight: 400;
	 background-color: #fff;
	 color: black;
	 font-size: 28rpx;
	 z-index: 999;
 }
</style>
